<template>
	<view class="content-class" :style="{ paddingTop: statusBarHeight + 'px' }">
		<u-navbar leftIconColor="#fff" bgColor="#1B1B1B" title="中医问诊" :autoBack="true">
		</u-navbar>
		<u-row class="user-info" justify="space-between">
			<u-row>
				<image :src="icon"></image>
				<view class="info">
					IVE-张元英
					<span> 出生日期：2004-08-31</span>
				</view>
			</u-row>
			<u-row justify="flex-end">
				<span>
					切换会员
				</span>
				<image style="width: 22px;height: 22px;margin-right: 0px;" src="../../static/images/homePage/switch.png"></image>
			</u-row>
		</u-row>
		<u-row class="tip">
			请将戒指戴在左/右手并点击您的选择
		</u-row>
		<u-row justify="center" class="head-cl">
			<u--image @click="skipSelectHand('left')" :showLoading="true" :src="selectedFinger.includes('left')?list[selectedFinger.split(',')[1]]:'../../static/images/homePage/headl.png'" style="margin-right: 13px;" width="165px" height="265px"></u--image>
			<u--image @click="skipSelectHand('right')" :showLoading="true" :src="selectedFinger.includes('right')?list['r-'+selectedFinger.split(',')[1]]:'../../static/images/homePage/headr.png'" width="165px" height="265px"></u--image>
			<span class="cl-tip left">左手测量</span>
			<span class="cl-tip right">右手测量</span>
		</u-row>
		<view class="card" v-for="i in cardList" :key="i.title" @click="skipPage(i)">
			<u-row>
				<u-col :span="6">
					<u-row>
						<image style="width: 18px;height: 18px;margin-right: 8px;" :src="i.icon"></image>
						{{i.title}}
					</u-row>
				</u-col>
				<u-col class="sub-title" textAlign="right" :span="6">
					<u-row justify="flex-end">
						{{i.subTitle}}
						<u-icon style="margin-left: 8px;" size="10" :name="i.title=='当前连接的设备'?'attach':'arrow-right' " color="#F3D2BA"></u-icon>
					</u-row>
				</u-col>
			</u-row>
		</view>
		<view class="bottom-btn">
			<view class="sport-btn" @click="skipMeasuring">开始测量{{selectedFinger}}</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex"
	export default {
		data() {
			return {
				list: {
					'1': require("../../static/images/homePage/1.png"),
					'r-1': require("../../static/images/homePage/r-1.png"),
					'2': require("../../static/images/homePage/2.png"),
					'r-2': require("../../static/images/homePage/r-2.png"),
					'3': require("../../static/images/homePage/3.png"),
					'r-3': require("../../static/images/homePage/r-3.png"),
					'4': require("../../static/images/homePage/4.png"),
					'r-4': require("../../static/images/homePage/r-4.png"),
					'5': require("../../static/images/homePage/5.png"),
					'r-5': require("../../static/images/homePage/r-5.png"),
				},
				selectedFinger: '',
				icon: require("../../static/images/homePage/tx.png"),
				cardList: [{
					title: '检测注意事项',
					icon: require("../../static/images/homePage/zysx.png"),
					subTitle: '点击查看'
				}, {
					title: '当前连接的设备',
					icon: require("../../static/images/my/sbsz.png"),
					subTitle: '张元英的健康戒指'
				}, {
					title: '查看检测记录',
					icon: require("../../static/images/my/ckjcjl.png"),
					subTitle: '点击查看',
					page: 'TestingRecords'
				}]
			};
		},
		methods: {
			skipPage(i) {
				if (!i.page) return
				uni.navigateTo({
					url: `/pages/${i.page}/${i.page}`
				})
			},
			skipMeasuring(hand) {
				if (!this.selectedFinger) {
					uni.showToast({
						icon: "none",
						title: '请先选择佩戴位置'
					})
					return
				}
				uni.navigateTo({
					url: '/pages/Measuring/Measuring'
				})
			},
			skipSelectHand(hand) {
				uni.navigateTo({
					url: "/pages/PublicPage/PublicPage?pageConfig=" + JSON.stringify({
						page: 'SelectFinger',
						name: '选择测量手指',
						hand: hand,
					})
				})
			},
		},
		onLoad(e) {
			if (e.selectedFinger) {
				this.selectedFinger = e.selectedFinger
			}
		},
		computed: {
			...mapGetters(["statusBarHeight"]),
		},
	};
</script>

<style scoped lang="scss">
	.content-class {
		padding-left: 15px;
		padding-right: 15px;
		padding-bottom: 75px;

		.head-cl {
			position: relative;

			.cl-tip {
				position: absolute;
				width: 56px;
				font-weight: bold;
				color: #FFD8BB;
				bottom: 28px;
			}

			.left {
				left: 50%;
				transform: translateX(-50% - 165);
			}

			.right {
				right: 50%;
				transform: translateX(50% + 165);
			}

		}

		.user-info {
			padding: 20px 0px 10px 0px;
			font-size: 18px;

			image {
				width: 58px;
				height: 58px;
				margin-right: 8px;
			}

			.info {
				display: flex;
				flex-direction: column;

				span {
					margin-top: 6px;
				}
			}

			span {
				font-size: 12px;
				color: rgba(255, 255, 255, 0.5);
				margin-right: 6px;
			}
		}

		.tip {
			background-image: url("../../static/images/homePage/border.png");
			background-size: 100% 100%;
			background-position: top;
			background-repeat: no-repeat;
			font-weight: 500;
			font-size: 14px;
			color: #FFD8BB;
			padding: 14px 0px;
			display: inline-flex;
			align-items: center;
			justify-content: center !important;
			text-align: center;
			width: 100%;
			margin: 10px 0px;
		}

		.card {
			width: 100%;
			background: #1B1B1B;
			border-radius: 12px;
			margin-bottom: 12px;
			margin-top: 12px;
			padding: 17px;
			box-sizing: border-box;

			.number {
				height: 36px;
				font-size: 30px;
				color: #FFD8BB;
				line-height: 36px;
				padding: 8px 3px;

				span {
					height: 20px;
					font-weight: 600;
					font-size: 14px;
					line-height: 20px;
					margin-left: 2px;
				}
			}

			::v-deep .u-icon {
				width: 20px;
				height: 20px;
				border-radius: 50%;
				justify-content: center;
				background: linear-gradient(180deg, #242820 0%, #171314 100%);
				border: 0px solid;
				border-image: linear-gradient(180deg, rgba(126, 116, 94, 1), rgba(24, 20, 21, 1)) 0 0;
			}

			.sub-title {
				font-size: 12px;
				color: rgba(255, 255, 255, 0.5);
				line-height: 17px;
				text-align: left;


			}
		}

	}
</style>